<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="120px"
        :formColumns="DETAIL_FORM_ITEMS"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        :isScalingBtn="false"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        :tableRowClassName="setTableRowClassName"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { DETAIL_FORM_ITEMS, DETAIL_TABLE_COLUMNS } from './constants';
import { setAuthBtnId } from '@/utils/bizUtils';
import { queryPriceCycleToDoDetailService } from '@/api/finance/priceCycleManage/toDoList';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      materialName: '',
      materialId: null,
      categoryDialogVisible: false,
      DETAIL_FORM_ITEMS,
      formData: {
        mainRecordNo: '',
        state: '',
        overdueState: '',
        statisticsDate: [],
      },
      tableInfo: {
        list: [],
        columns: DETAIL_TABLE_COLUMNS,
        loading: false,
        selection: []
      },
    }
  },
  mounted () {
    const { recordNo, state } = this.$route.query;
    if (recordNo) {
      this.formData.mainRecordNo = recordNo;
      this.formData.state = state;
      this.getTableData()
    }
  },
  methods: {
    // 获取表单查询入参
    getSearchFormParams () {
      const [startDate = '', endDate = ''] = this.formData.statisticsDate || [];
      const formData = {
        startDate,
        endDate,
        ..._.omit(this.formData, 'statisticsDate'),
      }
      return {
        ...this.paginationParams,
        ...formData,
      }
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId();
      const data = this.getSearchFormParams();
      const { retData } = await queryPriceCycleToDoDetailService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.total = retData.totalNum;
      }
    },
    // 表格背景色设置 是否超期 是 粉色提示
    setTableRowClassName ({ row, rowIndex }) {
      if (row.overdueState == 1) {
        return 'error-row';
      }
      return '';
    }
  }
}
</script>
